<template>
  <h1>管理员列表</h1>
  <hr />
  <el-table :data="AdminList" style="width: 100%" height="90%" v-loading="loading">
    <el-table-column fixed prop="adminid" label="管理员编号" width="200" />
    <el-table-column prop="adminname" label="管理员姓名" width="200" />
    <el-table-column prop="password" label="密码" width="200">
      <!-- <template #default>
        <span>******</span>
      </template> -->
    </el-table-column>
    <el-table-column prop="role" label="角色" width="200">
      <template #default="scope">
        <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" v-if="crud.charAt(1) === '1'">
      <template #default="scope">
        <el-button size="small" @click="editAdmin(scope.row.adminname)"
          v-if="crud.charAt(2) === '1'" >Edit</el-button
        >
        <el-popconfirm
          title="确定要删除么?删了就没有了噢?"
          @confirm="delAdmin(scope.row.adminid)"  v-if="crud.charAt(3) === '1'"
        >
          <template #reference>
            <el-button size="small" type="danger"> Delete </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
    <Edit
    v-show="isShowEdit"
    @hide="hideFn"
    :adminname="editAdminName"
    @updatesuccess="successFn"
  ></Edit>
  
</template>

<script setup lang="ts">
import Edit from "./Edit.vue";
import { reactive, ref } from "vue";
import service from "../../../utils/service";

import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";

// 导入useRoute
import { useRoute } from "vue-router";
// 调用当前路由
const $route = useRoute();
// 打印
console.log("$route", $route);
// 获取当前的curd数据
const crud: string = $route.meta.crud as string;

const loading = ref(true)

interface IAdmin {
  adminid: string;
  adminname: string;
  password: string;
  role: number; // 1:表示超级管理员，2：普通管理员
  checkedKeys: any;
}

// 管理员数据
let AdminList = reactive<IAdmin[]>([]);

// 获取管理员列表
const getAdminList = () => {
  service({
    url: "admin/admin/list",
  }).then((res: any) => {
    if (res.data.code === "200") {
      AdminList.length = 0;
      AdminList.push(...res.data.data);
      loading.value = false
    }
  });
};

getAdminList();

// 删除管理员
const delAdmin = (adminid: string) => {
  service({
    url: "/admin/admin/delete",
    method: "post",
    data: {
      adminid: adminid,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "删除成功！",
        type: "success",
      });
      // 利用删除前端数组删除(如果多人同时操作数据，那么，就看不到别人删除的数据)
      let index = AdminList.findIndex((item) => item.adminid === adminid);
      AdminList.splice(index, 1);
    }
  });
};

// 修改管理员信息
// 弹出框显示隐藏
const isShowEdit = ref(false);
// 获取要修改的管理员姓名
const editAdminName = ref("");

// 修改管理员信息
const editAdmin = (adminname: string) => {
  isShowEdit.value = true;
  // 获取监听到的管理员姓名
  editAdminName.value = adminname;
};

// 关闭弹窗
const hideFn = () => {
  isShowEdit.value = false;
};

// 修改成功重新获取数据
const successFn = () => getAdminList();
</script>

<style>
</style>